<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getProvincesSalesData,
  getSupplierSalesData,
  getBuyerData,
  getBrandData,
  getProductData
} from "@/api/dashboard";
import { useCalc } from "./utils/hooks";
import chartMap from "./components/chartMap.vue";
import chartLine from "./components/chartLine.vue";

import ReCol from "@/components/ReCol";
import ReTimePicker from "@/components/ReTimePicker";

const TIME = [1704038400000, 1724947200000];

const { getTop10, changeArray } = useCalc();

let mapData = ref([]);

/** 供应商排名 */
let supplierRanking = ref([]);
let buyerRanking = ref([]);
let brandRanking = ref([]);
let productRanking = ref([]);

onMounted(() => {
  getProvincesSalesData(TIME).then(res => {
    mapData.value = res.data;
    supplierRanking.value = getTop10(res.data.province);
  });
  // getSupplierSalesData(TIME).then(res => console.log(res));
  /** 采购单位排名 */
  getBuyerData(TIME).then(res => {
    buyerRanking.value = getTop10(changeArray(res.data, "unitname", "total"));
    // changeArray(res.data,);
  });
  getBrandData(TIME).then(res => {
    brandRanking.value = getTop10(changeArray(res.data, "brandname", "total"));
  });
  getProductData(TIME).then(res => {
    productRanking.value = getTop10(changeArray(res.data, "goodname", "total"));
  });
});

/**
 * @description: 改变统计地区
 * @param {*} val
 * @return {*}
 */
function changeArea(val) {
  if (val === "广东") {
    supplierRanking.value = getTop10(mapData.value.city);
  } else {
    supplierRanking.value = getTop10(mapData.value.province);
  }
}
</script>

<template>
  <div>
    <ReTimePicker title="订单统计" />
    <el-row justify="space-around">
      <re-col :value="24" :lg="8">
        <el-card>
          <chartMap :data="mapData" @change="changeArea" />
        </el-card>
      </re-col>
      <re-col :value="24" :lg="8">
        <el-card>
          <chartLine title="分布排名" :data="supplierRanking" />
        </el-card>
      </re-col>
      <re-col :value="24" :lg="8">
        <el-card>
          <chartLine title="采购单位排名" :data="buyerRanking" />
        </el-card>
      </re-col>
    </el-row>

    <el-row justify="space-around">
      <re-col :value="24" :lg="8">
        <el-card>
          <chartLine title="品牌排名" :data="brandRanking" />
        </el-card>
      </re-col>
      <re-col :value="24" :lg="8">
        <el-card>
          <chartLine title="商品销量排名" :data="productRanking" />
        </el-card>
      </re-col>
      <re-col :value="24" :lg="8">
        <el-card>
          <chartLine title="单位排名" :data="supplierRanking" />
        </el-card>
      </re-col>
    </el-row>

    <!-- <ReTimePicker title="区域订单统计" /> -->
  </div>
</template>

<style lang="scss" scoped></style>
